@page "/adventure"
@page "/adventure/dungeon/{DungeonId}"
@page "/adventure/world"
@using Microsoft.AspNetCore.Components
@using Microsoft.AspNetCore.SignalR.Client
@using Microsoft.JSInterop
@using System.Threading.Tasks
@using jiuyuan.数据.共享类
@using jiuyuan.服务
@using jiuyuan.数据.玩家类
@using jiuyuan.数据.怪物类
@using jiuyuan.管理器
@using jiuyuan.数据.基础数据类
@using jiuyuan.数据.用户类
@using jiuyuan.Components.Pages
@implements IAsyncDisposable

<style>
    /* 使用之前优化的CSS样式 */
    #adventure-page {
        display: flex;
        flex-direction: column;
        height: 100vh;
        width: 100vw;
        background: radial-gradient(circle at 20% 30%, #1a1a3a 0%, #0a0a1a 100%);
        position: relative;
        overflow: hidden;
        color: #fff;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /* 浮动水晶效果 */
    .floating-crystal {
        position: absolute;
        width: 80px;
        height: 80px;
        background: radial-gradient(circle at 30% 30%, rgba(106, 13, 173, 0.6), rgba(74, 44, 141, 0.3));
        border-radius: 50%;
        filter: blur(8px);
        animation: float 6s ease-in-out infinite;
        z-index: 0;
    }

    .crystal-1 {
        top: 10%;
        left: 5%;
        animation-delay: 0s;
    }

    .crystal-2 {
        bottom: 15%;
        right: 8%;
        animation-delay: 3s;
    }



    /* 冒险页面头部 */
    .adventure-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background-color: rgba(20, 20, 40, 0.9);
        border-bottom: 2px solid #4a2c8d;
        height: 70px;
        position: relative;
        z-index: 10;
    }

    .adventure-title {
        font-size: 1.8rem;
        color: #b19cd9;
        text-shadow: 0 0 10px rgba(177, 156, 217, 0.7);
        font-family: 'Georgia', serif;
        margin: 0;
    }

    .header-actions {
        display: flex;
        gap: 10px;
    }

    /* 按钮样式 */
    .btn {
        background: linear-gradient(to right, #4a2c8d, #6a0dad);
        border: none;
        border-radius: 8px;
        padding: 10px 15px;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: bold;
        min-width: 100px;
    }

    .btn:hover {
        background: linear-gradient(to right, #5a3c9d, #7a1ddd);
        box-shadow: 0 0 15px rgba(106, 13, 173, 0.7);
        transform: translateY(-2px);
    }

    .btn:active {
        transform: translateY(1px);
    }

    .flee-btn {
        background: linear-gradient(to right, #8d2c2c, #ad0d0d);
    }

    .flee-btn:hover {
        background: linear-gradient(to right, #9d3c3c, #dd1d1d);
        box-shadow: 0 0 15px rgba(173, 13, 13, 0.7);
    }

    .auto-battle-btn {
        background: linear-gradient(to right, #2c8d5a, #0dad6a);
    }

    .auto-battle-btn:hover {
        background: linear-gradient(to right, #3c9d6a, #1ddd7a);
        box-shadow: 0 0 15px rgba(13, 173, 106, 0.7);
    }

    .auto-battle-btn.active {
        background: linear-gradient(to right, #d4af37, #ffd700);
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
        color: #2c2c2c;
    }

    /* 战斗容器 */
    .battle-container {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        padding: 20px;
        position: relative;
        z-index: 5;
    }

    /* 玩家回合指示器 */
    .player-turn-indicator {
        background: linear-gradient(to right, rgba(106, 13, 173, 0.8), rgba(177, 156, 217, 0.8));
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
        text-align: center;
        font-weight: bold;
        color: #fff;
        box-shadow: 0 4px 15px rgba(106, 13, 173, 0.5);
        border: 1px solid #b19cd9;
        position: relative;
        z-index: 5;
    }

    .turn-text {
        font-size: 1.2rem;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    }

    /* 战斗参与者区域 - 重新设计 */
    .battle-participants {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        flex-shrink: 0;
        position: relative;
        z-index: 5;
        gap: 20px;
    }

    .party-members, .enemies {
        display: flex;
        gap: 25px;
        flex: 1;
        justify-content: center;
    }

    /* 重新设计战斗单位卡片 - 无边框，大头像 */
    .combatant {
        width: 180px;
        padding: 0;
        border-radius: 15px;
        text-align: center;
        background: rgba(30, 30, 60, 0.7);
        position: relative;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
        color: white;
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .combatant:hover {
        background: rgba(40, 40, 80, 0.8);
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(106, 13, 173, 0.3);
    }

    .combatant.selected {
        background: rgba(60, 30, 100, 0.8);
        box-shadow: 0 0 25px rgba(177, 156, 217, 0.6);
        transform: translateY(-5px);
    }

    /* 大头像区域 */
    .combatant-avatar-container {
        padding: 25px 20px 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .combatant-avatar {
        font-size: 64px;
        width: 100px;
        height: 100px;
        line-height: 100px;
        border-radius: 50%;
        background: rgba(74, 44, 141, 0.4);
        margin: 0 auto 15px;
        box-shadow: 0 0 20px rgba(106, 13, 173, 0.5);
        transition: all 0.3s ease;
    }

    .combatant.selected .combatant-avatar {
        box-shadow: 0 0 30px rgba(177, 156, 217, 0.8);
        transform: scale(1.05);
    }

    .combatant-name {
        font-size: 18px;
        font-weight: bold;
        color: #e0e0ff;
        text-shadow: 0 0 8px rgba(224, 224, 255, 0.5);
        margin-bottom: 5px;
    }

    .combatant-level {
        font-size: 14px;
        color: #b19cd9;
        margin-bottom: 15px;
    }

    /* 信息区域 */
    .combatant-info {
        padding: 15px;
        background: rgba(20, 20, 40, 0.6);
        border-top: 1px solid rgba(74, 44, 141, 0.3);
    }

    .health-bar, .mana-bar {
        height: 14px;
        background: rgba(20, 20, 40, 0.8);
        border-radius: 7px;
        margin: 8px 0;
        overflow: hidden;
        position: relative;
    }

    .health-fill {
        height: 100%;
        background: linear-gradient(90deg, #e74c3c, #c0392b);
        transition: width 0.5s ease;
        border-radius: 7px;
    }

    .mana-fill {
        height: 100%;
        background: linear-gradient(90deg, #3498db, #2980b9);
        transition: width 0.5s ease;
        border-radius: 7px;
    }

    .combatant-stats {
        font-size: 12px;
        color: #a0a0e0;
        margin-top: 8px;
        display: flex;
        justify-content: space-between;
    }

    .target-indicator {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 24px;
        height: 24px;
        background: linear-gradient(to right, #27ae60, #2ecc71);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: white;
        box-shadow: 0 0 10px rgba(46, 204, 113, 0.8);
    }

    /* 战斗日志容器 - 简化设计 */
    .battle-log-container {
        flex: 1;
        overflow-y: auto;
        border-radius: 10px;
        padding: 0;
        margin-bottom: 20px;
        background: rgba(10, 10, 20, 0.8);
        color: #fff;
        position: relative;
        z-index: 5;
        border: 1px solid rgba(74, 44, 141, 0.5);
    }

    .battle-log {
        display: flex;
        flex-direction: column;
        padding: 15px;
        height: 100%;
    }

    .battle-log-entry {
        padding: 8px 0;
        font-family: 'Courier New', monospace;
        font-size: 14px;
        line-height: 1.4;
        border-bottom: 1px solid rgba(74, 44, 141, 0.2);
        animation: fadeIn 0.3s ease;
    }


    /* 战斗日志颜色样式 */
    .battle-start { color: #f1c40f; font-weight: bold; text-shadow: 0 0 5px rgba(241, 196, 15, 0.5); }
    .player-action { color: #3498db; font-weight: bold; }
    .enemy-action { color: #e74c3c; font-weight: bold; }
    .skill-name { color: #f1c40f; }
    .item-name { color: #2ecc71; }
    .damage-number { color: #e74c3c; font-weight: bold; }
    .heal-number { color: #2ecc71; font-weight: bold; }
    .death-message { color: #c0392b; font-weight: bold; font-size: 1.1em; }
    .victory-message { color: #27ae60; font-weight: bold; font-size: 1.2em; text-shadow: 0 0 10px rgba(39, 174, 96, 0.5); }
    .defeat-message { color: #c0392b; font-weight: bold; font-size: 1.2em; text-shadow: 0 0 10px rgba(192, 57, 43, 0.5); }
    .system-message { color: #9b59b6; }
    .flee-action { color: #f39c12; }
    .warning { color: #f39c12; font-weight: bold; }

    /* 暴击效果 */
    .critical-hit {
        font-size: 1.3em;
        font-weight: bold;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
        color: #ffd700;
    }

    /* 重新设计战斗动作区域 */
    .battle-actions {
        display: flex;
        gap: 15px;
        flex-shrink: 0;
        padding: 20px;
        background: rgba(25, 25, 45, 0.9);
        border-radius: 15px;
        margin-top: 15px;
        position: relative;
        z-index: 5;
        border: 1px solid rgba(74, 44, 141, 0.5);
    }

    .skills-section, .items-section {
        display: flex;
        gap: 12px;
        flex: 1;
    }

    .special-section {
        display: flex;
        gap: 12px;
    }

    /* 重新设计技能和物品按钮 */
    .battle-action-btn {
        padding: 15px 10px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        min-width: 90px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        color: white;
        font-weight: bold;
        background: rgba(40, 40, 70, 0.9);
        position: relative;
    }

    .battle-action-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(106, 13, 173, 0.4);
    }

    .battle-action-btn:active {
        transform: translateY(1px);
    }

    /* 技能按钮样式 */
    .skill-btn {
        background: linear-gradient(145deg, rgba(74, 44, 141, 0.9), rgba(106, 13, 173, 0.9));
        border: 1px solid #6a0dad;
    }

    .skill-btn:hover {
        background: linear-gradient(145deg, rgba(94, 64, 161, 0.9), rgba(126, 33, 173, 0.9));
    }

    /* 物品按钮样式 */
    .item-btn {
        background: linear-gradient(145deg, rgba(39, 174, 96, 0.9), rgba(46, 204, 113, 0.9));
        border: 1px solid #2ecc71;
    }

    .item-btn:hover {
        background: linear-gradient(145deg, rgba(59, 194, 116, 0.9), rgba(66, 224, 133, 0.9));
    }

    /* 特殊按钮样式 */
    .special-btn {
        background: linear-gradient(145deg, rgba(155, 89, 182, 0.9), rgba(142, 68, 173, 0.9));
        border: 1px solid #8e44ad;
        min-width: 100px;
    }

    .special-btn:hover {
        background: linear-gradient(145deg, rgba(175, 109, 202, 0.9), rgba(162, 88, 193, 0.9));
    }

    /* 空槽样式 - 显示+号 */
    .empty-slot {
        background: rgba(30, 30, 60, 0.6);
        border: 2px dashed rgba(74, 44, 141, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .empty-slot:hover {
        background: rgba(40, 40, 80, 0.7);
        border-color: rgba(106, 13, 173, 0.7);
    }

    .add-icon {
        font-size: 24px;
        color: #b19cd9;
        font-weight: bold;
    }

    .skill-name, .item-name, .special-name {
        font-size: 14px;
        margin-bottom: 6px;
        text-align: center;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }

    .skill-cost, .item-count {
        font-size: 11px;
        color: #e0e0ff;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        opacity: 0.9;
    }

    /* 滚动条样式 */
    .battle-log-container::-webkit-scrollbar {
        width: 6px;
    }

    .battle-log-container::-webkit-scrollbar-track {
        background: rgba(20, 20, 40, 0.5);
        border-radius: 3px;
    }

    .battle-log-container::-webkit-scrollbar-thumb {
        background: linear-gradient(to bottom, #4a2c8d, #6a0dad);
        border-radius: 3px;
    }

    .battle-log-container::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(to bottom, #5a3c9d, #7a1ddd);
    }

    /* 模态框样式 */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .modal-content {
        background: radial-gradient(circle at 30% 30%, #1a1a3a 0%, #0a0a1a 100%);
        border-radius: 15px;
        padding: 25px;
        width: 90%;
        max-width: 800px;
        max-height: 80vh;
        overflow-y: auto;
        border: 2px solid #4a2c8d;
        box-shadow: 0 0 30px rgba(106, 13, 173, 0.5);
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #4a2c8d;
    }

    .modal-title {
        font-size: 1.5rem;
        color: #b19cd9;
        margin: 0;
    }

    .close-btn {
        background: none;
        border: none;
        color: #a0a0e0;
        font-size: 1.5rem;
        cursor: pointer;
        padding: 5px;
    }

    .close-btn:hover {
        color: #e0e0ff;
    }

    /* 背包物品网格 */
    .backpack-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 15px;
        margin-top: 15px;
    }

    .backpack-item {
        background: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 10px;
        padding: 15px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .backpack-item:hover {
        background: rgba(40, 40, 80, 0.9);
        border-color: #6a0dad;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(106, 13, 173, 0.3);
    }

    .item-icon {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }

    .item-details {
        text-align: center;
    }

    .item-title {
        font-size: 1rem;
        color: #e0e0ff;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .item-description {
        font-size: 0.8rem;
        color: #a0a0e0;
        margin-bottom: 8px;
    }

    .item-count {
        font-size: 0.9rem;
        color: #b19cd9;
        font-weight: bold;
    }

    /* 技能选择网格 */
    .skills-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 15px;
        margin-top: 15px;
    }

    .skill-option {
        background: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 10px;
        padding: 15px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .skill-option:hover {
        background: rgba(40, 40, 80, 0.9);
        border-color: #6a0dad;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(106, 13, 173, 0.3);
    }

    .skill-icon {
        font-size: 2rem;
        margin-bottom: 8px;
    }

    .skill-details {
        text-align: center;
    }

    .skill-title {
        font-size: 0.9rem;
        color: #e0e0ff;
        margin-bottom: 5px;
        font-weight: bold;
    }

    .skill-cost {
        font-size: 0.8rem;
        color: #a0a0e0;
    }

</style>

<div id="adventure-page" style="display: @(是否显示 ? "flex" : "none");">
    <div class="floating-crystal crystal-1"></div>
    <div class="floating-crystal crystal-2"></div>

    <!-- 聊天框组件 -->
    <ChatBox IsVisible="true" />

    <div class="adventure-header">
        <h1 class="adventure-title" id="adventure-location">@当前地点</h1>
        <div class="header-actions">
            <button class="btn flee-btn" @onclick="逃离战斗">逃离</button>
            <button class="btn auto-battle-btn @(自动战斗 ? "active" : "")" @onclick="切换自动战斗">
                @(自动战斗 ? "停止托管" : "开启托管")
            </button>
        </div>
    </div>

    <div class="battle-container">
        <!-- 玩家回合提示 -->
        @if (当前行动玩家 != null)
        {
            <div class="player-turn-indicator">
                <span class="turn-text">轮到你了，@当前行动玩家.名称！请选择技能和目标。</span>
            </div>
        }

        <div class="battle-participants">
            <div class="party-members">
                @foreach (var 玩家 in 玩家列表)
                {
                    <div class="combatant @(选中目标?.Id == 玩家.Id ? "selected" : "")" @onclick="() => 选择目标(玩家)">
                        <div class="combatant-avatar-container">
                            <div class="combatant-avatar player">@玩家.头像</div>
                            <div class="combatant-name">@玩家.名称</div>
                            <div class="combatant-level">Lv. @玩家.等级</div>
                        </div>
                        <div class="combatant-info">
                            <div class="health-bar">
                                <div class="health-fill" style="width: @((玩家.当前生命值 * 100 / Math.Max(1, 玩家.当前属性.生命值)))%"></div>
                            </div>
                            <div class="mana-bar">
                                <div class="mana-fill" style="width: @((玩家.当前魔法值 * 100 / Math.Max(1, 玩家.当前属性.魔法值)))%"></div>
                            </div>
                            <div class="combatant-stats">
                                <span>HP: @玩家.当前生命值/@玩家.当前属性.生命值</span>
                                <span>MP: @玩家.当前魔法值/@玩家.当前属性.魔法值</span>
                            </div>
                        </div>
                        <div class="target-indicator" style="display: @(选中目标?.Id == 玩家.Id ? "flex" : "none");">✓</div>
                    </div>
                }
            </div>

            <div class="enemies">
                @foreach (var 怪物 in 怪物列表)
                {
                    <div class="combatant enemy @(选中目标?.Id == 怪物.Id ? "selected" : "")" @onclick="() => 选择目标(怪物)">
                        <div class="combatant-avatar-container">
                            <div class="combatant-avatar enemy">@怪物.头像</div>
                            <div class="combatant-name">@怪物.名称</div>
                            <div class="combatant-level">Lv. @怪物.等级</div>
                        </div>
                        <div class="combatant-info">
                            <div class="health-bar">
                                <div class="health-fill" style="width: @((怪物.当前生命值 * 100 / Math.Max(1, 怪物.当前属性.生命值)))%"></div>
                            </div>
                            <div class="mana-bar">
                                <div class="mana-fill" style="width: @((怪物.当前魔法值 * 100 / Math.Max(1, 怪物.当前属性.魔法值)))%"></div>
                            </div>
                            <div class="combatant-stats">
                                <span>HP: @怪物.当前生命值/@怪物.当前属性.生命值</span>
                                <span>MP: @怪物.当前魔法值/@怪物.当前属性.魔法值</span>
                            </div>
                        </div>
                        <div class="target-indicator" style="display: @(选中目标?.Id == 怪物.Id ? "flex" : "none");">✓</div>
                    </div>
                }
            </div>
        </div>

        <div class="battle-log-container">
            <div class="battle-log" id="battle-log">
                @foreach (var 日志 in 战斗日志列表)
                {
                    <div class="battle-log-entry">@(new MarkupString(日志))</div>
                }
            </div>
        </div>

        <div class="battle-actions">
            <!-- 技能槽 (5个) -->
            <div class="skills-section">
                @for (int i = 0; i < 5; i++)
                {
                    if (i < 技能列表.Count)
                    {
                        var 技能 = 技能列表[i];
                        <button class="battle-action-btn skill-btn" @onclick="() => 使用技能(技能)">
                            <span class="skill-name">@技能.名称</span>
                            <span class="skill-cost">MP: @技能.消耗魔法值</span>
                        </button>
                    }
                    else if (i == 4) 
                    {
                        <button class="battle-action-btn skill-btn empty-slot" @onclick="打开技能选择">
                            <span class="add-icon">+</span>
                        </button>
                    }
                    else
                    {
                        <button class="battle-action-btn skill-btn empty-slot" disabled>
                            <span class="empty-text">-</span>
                        </button>
                    }
                }
            </div>

            <!-- 物品槽 (3个) -->
            <div class="items-section">
                @for (int i = 0; i < 3; i++)
                {
                    if (i < 物品列表.Count)
                    {
                        var 物品 = 物品列表[i];
                        <button class="battle-action-btn item-btn" @onclick="() => 使用物品(物品)">
                            <span class="item-name">@物品.名称</span>
                            <span class="item-count">x@物品.数量</span>
                        </button>
                    }
                    else
                    {
                        <button class="battle-action-btn item-btn empty-slot" @onclick="打开背包">
                            <span class="add-icon">+</span>
                        </button>
                    }
                }
            </div>

            <!-- 特殊按钮 -->
            <div class="special-section">
                <button class="battle-action-btn special-btn" @onclick="打开背包">
                    <span class="special-name">背包</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 技能选择模态框 -->
    @if (显示技能选择)
    {
        <div class="modal-overlay" @onclick="关闭技能选择">
            <div class="modal-content" @onclick:stopPropagation>
                <div class="modal-header">
                    <h2 class="modal-title">选择技能</h2>
                    <button class="close-btn" @onclick="关闭技能选择">&times;</button>
                </div>
                <div class="skills-grid">
                    @foreach (var 可选技能 in 可选技能列表)
                    {
                        <div class="skill-option" @onclick="() => 选择技能(可选技能)">
                            <div class="skill-icon">⚡</div>
                            <div class="skill-details">
                                <div class="skill-title">@可选技能.名称</div>
                                <div class="skill-cost">消耗: @可选技能.消耗魔法值 MP</div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    }

    <!-- 背包模态框 -->
    @if (显示背包)
    {
        <div class="modal-overlay" @onclick="关闭背包">
            <div class="modal-content" @onclick:stopPropagation>
                <div class="modal-header">
                    <h2 class="modal-title">背包</h2>
                    <button class="close-btn" @onclick="关闭背包">&times;</button>
                </div>
                <div class="backpack-grid">
                    @foreach (var 背包物品 in 背包物品列表)
                    {
                        <div class="backpack-item" @onclick="() => 使用背包物品(背包物品)">
                            <div class="item-icon">@获取物品图标(背包物品)</div>
                            <div class="item-details">
                                <div class="item-title">@背包物品.名称</div>
                                <div class="item-description">@获取物品描述(背包物品)</div>
                                <div class="item-count">数量: @背包物品.数量</div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    }
</div>

@code {
    #region 参数和注入
    [Parameter]
    public string DungeonId { get; set; } = "";

    [Parameter]
    public string 地点类型 { get; set; } = "world";

    [Inject]
    public IJSRuntime JS { get; set; } = null!;

    [Inject]
    public NavigationManager Navigation { get; set; } = null!;

    [Inject]
    public 配置加载器 配置加载器 { get; set; } = null!;

    [Inject]
    public 游戏主服务 游戏主服务 { get; set; } = null!;

    [Inject]
    public 战斗管理器 战斗管理器 { get; set; } = null!;
    #endregion

    #region 状态变量
    private HubConnection? _hubConnection;
    private bool _isConnected = false;
    private Guid 当前战斗Id { get; set; } = Guid.NewGuid();
    private jiuyuan.服务.副本实例? 当前副本 { get; set; }
    private List<玩家> 玩家队伍 { get; set; } = new();
    private List<怪物> 怪物队伍 { get; set; } = new();
    private 玩家? 当前行动玩家 { get; set; }
    private 战斗单位? 选中目标 { get; set; }
    private bool 自动战斗 { get; set; } = false;
    private List<string> 战斗日志列表 { get; set; } = new();
    private List<游戏元素> 可用技能列表 { get; set; } = new();
    private List<游戏元素> 可用物品列表 { get; set; } = new();
    private 战斗上下文? 当前战斗上下文 { get; set; }

    // 页面状态
    private bool 是否显示 { get; set; } = false;
    private string 当前地点 { get; set; } = "世界地图";

    // 模态框状态
    private bool 显示技能选择 = false;
    private bool 显示背包 = false;
    private List<游戏元素> 可选技能列表 = new();
    private List<游戏元素> 背包物品列表 = new();
    #endregion

    #region 计算属性
    private List<玩家> 玩家列表 => 玩家队伍;
    private List<怪物> 怪物列表 => 怪物队伍;
    private List<游戏元素> 技能列表 => 可用技能列表;
    private List<游戏元素> 物品列表 => 可用物品列表;
    #endregion

    #region 生命周期方法
    protected override async Task OnInitializedAsync()
    {
        await 初始化数据();
        await 初始化Hub连接();
        base.OnInitialized();
    }

    protected override void OnParametersSet()
    {
        if (!string.IsNullOrEmpty(DungeonId))
        {
            当前地点 = $"加载中...";
            地点类型 = "dungeon";

            _ = Task.Run(async () => {
                await Task.Delay(100);
                await InvokeAsync(async () => {
                    await 加载副本数据(DungeonId);
                    StateHasChanged();
                });
            });
        }
        else
        {
            当前地点 = "世界地图";
            地点类型 = "world";
        }

        是否显示 = true;
        base.OnParametersSet();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender || 战斗日志列表.Count > 0)
        {
            await 滚动到底部();
        }
    }

    public async ValueTask DisposeAsync()
    {
        if (_hubConnection != null)
        {
            await _hubConnection.DisposeAsync();
        }
    }
    #endregion

    #region Hub连接管理
    private async Task 初始化Hub连接()
    {
        try
        {
            _hubConnection = new HubConnectionBuilder()
                .WithUrl(Navigation.ToAbsoluteUri("/gamehub"))
                .WithAutomaticReconnect(new[] {
                    TimeSpan.Zero,
                    TimeSpan.FromSeconds(2),
                    TimeSpan.FromSeconds(5),
                    TimeSpan.FromSeconds(10)
                })
                .Build();

            // 注册客户端方法
            _hubConnection.On<string>("接收战斗日志", 添加战斗日志);
            _hubConnection.On<Guid, int, int, bool>("更新单位状态", 更新战斗单位状态);
            _hubConnection.On<Guid>("设置当前行动玩家", 设置当前行动玩家);
            _hubConnection.On<string>("接收系统消息", 添加系统消息);
            _hubConnection.On<Guid, string>("战斗开始", 开始战斗);
            _hubConnection.On<string, bool>("战斗结果", 添加战斗结果消息);
            _hubConnection.On<Guid, int>("玩家回合开始", 处理玩家回合开始);
            _hubConnection.On<string>("战斗决策接受", 处理战斗决策接受);
            _hubConnection.On<string>("战斗决策错误", 处理战斗决策错误);
            _hubConnection.On<bool>("自动战斗设置", 处理自动战斗设置);

            _hubConnection.Closed += async (error) =>
            {
                _isConnected = false;
                Console.WriteLine($"SignalR连接关闭: {error?.Message}");
                await Task.Delay(2000);
                await 初始化Hub连接();
            };

            _hubConnection.Reconnected += (connectionId) =>
            {
                _isConnected = true;
                Console.WriteLine("SignalR重新连接成功");
                if (当前战斗Id != Guid.Empty)
                {
                    _ = _hubConnection.InvokeAsync("加入战斗观察", 当前战斗Id);
                }
                return Task.CompletedTask;
            };

            await _hubConnection.StartAsync();
            _isConnected = true;

            // 加入当前战斗观察
            if (当前战斗Id != Guid.Empty)
            {
                await _hubConnection.InvokeAsync("加入战斗观察", 当前战斗Id);
            }

            Console.WriteLine("SignalR连接成功");
        }
        catch (Exception ex)
        {
            Console.WriteLine($"SignalR连接失败: {ex.Message}");
            添加战斗日志("<span class='warning'>连接服务器失败，部分功能可能不可用</span>");
        }
    }
    #endregion

    #region Hub客户端方法
    [JSInvokable]
    public void 添加战斗日志(string 日志内容)
    {
        战斗日志列表.Add(日志内容);
        StateHasChanged();
        _ = 滚动到底部();
    }

    [JSInvokable]
    public void 更新战斗单位状态(Guid 单位Id, int 当前生命值, int 当前魔法值, bool 是否存活 = true)
    {
        var 玩家 = 玩家列表.FirstOrDefault(p => p.Id == 单位Id);
        if (玩家 != null)
        {
            玩家.当前生命值 = 当前生命值;
            玩家.当前魔法值 = 当前魔法值;
            StateHasChanged();
            return;
        }

        var 怪物 = 怪物列表.FirstOrDefault(m => m.Id == 单位Id);
        if (怪物 != null)
        {
            怪物.当前生命值 = 当前生命值;
            怪物.当前魔法值 = 当前魔法值;
            StateHasChanged();
            return;
        }
    }

    [JSInvokable]
    public void 设置当前行动玩家(Guid 玩家Id)
    {
        当前行动玩家 = 玩家列表.FirstOrDefault(p => p.Id == 玩家Id);
        StateHasChanged();
    }

    [JSInvokable]
    public async Task 开始战斗(Guid 战斗Id, string 副本名称)
    {
        当前战斗Id = 战斗Id;
        当前地点 = 副本名称;

        await 初始化真实战斗数据();

        StateHasChanged();
        _ = 滚动到底部();
    }

    [JSInvokable]
    public void 添加战斗结果消息(string 消息, bool 是否胜利)
    {
        if (是否胜利)
        {
            添加战斗日志($"<span class='victory-message'>{消息}</span>");
        }
        else
        {
            添加战斗日志($"<span class='defeat-message'>{消息}</span>");
        }
        StateHasChanged();
        _ = 滚动到底部();
    }

    [JSInvokable]
    public void 添加系统消息(string 消息)
    {
        添加战斗日志($"<span class='system-message'>{消息}</span>");
        StateHasChanged();
        _ = 滚动到底部();
    }

    private void 处理玩家回合开始(Guid 玩家Id, int 剩余时间)
    {
        当前行动玩家 = 玩家列表.FirstOrDefault(p => p.Id == 玩家Id);
        StateHasChanged();
    }

    private void 处理战斗决策接受(string 消息)
    {
        添加战斗日志($"<span class='system-message'>{消息}</span>");
        StateHasChanged();
    }

    private void 处理战斗决策错误(string 错误消息)
    {
        添加战斗日志($"<span class='warning'>{错误消息}</span>");
        StateHasChanged();
    }

    private void 处理自动战斗设置(bool 是否自动)
    {
        自动战斗 = 是否自动;
        StateHasChanged();
    }
    #endregion

    #region 数据初始化
    private async Task 初始化数据()
    {
        try
        {
            // 初始化玩家数据
            玩家队伍 = new List<玩家>
            {
                new 玩家
                {
                    Id = Guid.NewGuid(),
                    名称 = "艾莉丝·火焰行者",
                    头像 = "🔥",
                    等级 = 15,
                    当前生命值 = 850,
                    当前魔法值 = 420,
                    基础属性 = new 属性配置
                    {
                        生命值 = 850,
                        魔法值 = 420,
                        物理攻击 = 45,
                        物理防御 = 35,
                        火属性攻击 = 85,
                        水属性攻击 = 0,
                        风属性攻击 = 0,
                        土属性攻击 = 0,
                        火属性抗性 = 40,
                        水属性抗性 = 25,
                        风属性抗性 = 25,
                        土属性抗性 = 25,
                        速度 = 65,
                        幸运值 = 30
                    },
                    当前属性 = new 属性配置
                    {
                        生命值 = 850,
                        魔法值 = 420,
                        物理攻击 = 45,
                        物理防御 = 35,
                        火属性攻击 = 85,
                        水属性攻击 = 0,
                        风属性攻击 = 0,
                        土属性攻击 = 0,
                        火属性抗性 = 40,
                        水属性抗性 = 25,
                        风属性抗性 = 25,
                        土属性抗性 = 25,
                        速度 = 65,
                        幸运值 = 30
                    },
                    当前技能槽 = new List<游戏元素>
                    {
                        new 游戏元素
                        {
                            名称 = "烈焰风暴",
                            类型 = 物品类型.技能,
                            消耗魔法值 = 45,
                            目标类型 = 技能目标类型.敌方群体,
                            元素类型 = 元素属性类型.火
                        },
                        new 游戏元素
                        {
                            名称 = "治疗之光",
                            类型 = 物品类型.技能,
                            消耗魔法值 = 35,
                            目标类型 = 技能目标类型.友方群体,
                            元素类型 = 元素属性类型.无
                        }
                    }
                }
            };

            // 初始化怪物数据
            怪物队伍 = new List<怪物>
            {
                new 怪物
                {
                    Id = Guid.NewGuid(),
                    名称 = "熔岩巨人",
                    头像 = "🌋",
                    等级 = 20,
                    当前生命值 = 1500,
                    当前魔法值 = 200,
                    基础属性 = new 属性配置
                    {
                        生命值 = 1500,
                        魔法值 = 200,
                        物理攻击 = 85,
                        物理防御 = 60,
                        火属性攻击 = 70,
                        水属性攻击 = 0,
                        风属性攻击 = 0,
                        土属性攻击 = 30,
                        火属性抗性 = 80,
                        水属性抗性 = 10,
                        风属性抗性 = 20,
                        土属性抗性 = 40,
                        速度 = 35,
                        幸运值 = 15
                    },
                    当前属性 = new 属性配置
                    {
                        生命值 = 1500,
                        魔法值 = 200,
                        物理攻击 = 85,
                        物理防御 = 60,
                        火属性攻击 = 70,
                        水属性攻击 = 0,
                        风属性攻击 = 0,
                        土属性攻击 = 30,
                        火属性抗性 = 80,
                        水属性抗性 = 10,
                        风属性抗性 = 20,
                        土属性抗性 = 40,
                        速度 = 35,
                        幸运值 = 15
                    }
                }
            };

            // 初始化技能数据
            foreach (var 玩家 in 玩家队伍)
            {
                玩家.重新计算属性();
                // 修复类型转换问题
                可用技能列表.AddRange(玩家.当前技能槽);
            }

            // 初始化物品数据
            foreach (var 玩家 in 玩家队伍)
            {
                玩家.仓库物品 = new List<游戏元素>
                {
                    new 游戏元素
                    {
                        名称 = "超级治疗药水",
                        描述 = "恢复50点生命值",
                        类型 = 物品类型.消耗品,
                        数量 = 5,
                        效果列表 = []
                    },
                    new 游戏元素
                    {
                        名称 = "魔法增强剂",
                        类型 = 物品类型.消耗品,
                        数量 = 3,
                        效果列表 = []
                    }
                };
                可用物品列表.AddRange(玩家.仓库物品);
            }

            // 初始化可选技能
            可选技能列表 = new List<游戏元素>
            {
                new 游戏元素 { 名称 = "火球术", 消耗魔法值 = 30, 目标类型 = 技能目标类型.敌方单体, 元素类型 = 元素属性类型.火 },
                new 游戏元素 { 名称 = "治疗术", 消耗魔法值 = 25, 目标类型 = 技能目标类型.友方单体, 元素类型 = 元素属性类型.无 },
                new 游戏元素 { 名称 = "闪电链", 消耗魔法值 = 40, 目标类型 = 技能目标类型.敌方群体, 元素类型 = 元素属性类型.风 },
                new 游戏元素 { 名称 = "冰封领域", 消耗魔法值 = 35, 目标类型 = 技能目标类型.敌方群体, 元素类型 = 元素属性类型.水 },
                new 游戏元素 { 名称 = "大地护盾", 消耗魔法值 = 20, 目标类型 = 技能目标类型.自身, 元素类型 = 元素属性类型.土 }
            };

            // 初始化背包物品
            背包物品列表 = new List<游戏元素>
            {
                new 游戏元素 { 名称 = "治疗药水", 类型 = 物品类型.道具, 数量 = 5 },
                new 游戏元素 { 名称 = "魔法药水", 类型 = 物品类型.道具, 数量 = 3 },
                new 游戏元素 { 名称 = "复活卷轴", 类型 = 物品类型.道具, 数量 = 1 },
                new 游戏元素 { 名称 = "力量药剂", 类型 = 物品类型.道具, 数量 = 2 },
                new 游戏元素 { 名称 = "敏捷药剂", 类型 = 物品类型.道具, 数量 = 2 }
            };

            // 初始化战斗日志
            战斗日志列表 = new List<string>
            {
                "<span class='battle-start'>[战斗开始] 你遭遇了熔岩巨人！</span>",
                "<span class='system-message'>敌人出现了！准备战斗！</span>"
            };

            StateHasChanged();
        }
        catch (Exception ex)
        {
            Console.WriteLine($"初始化数据失败: {ex.Message}");
            添加战斗日志("<span class='warning'>初始化数据失败，请检查控制台获取详细信息。</span>");
        }
    }

    private async Task 初始化真实战斗数据()
    {
        try
        {
            // 重新初始化玩家数据
            玩家队伍 = new List<玩家>
            {
                new 玩家
                {
                    Id = Guid.NewGuid(),
                    名称 = "艾莉丝·火焰行者",
                    头像 = "🔥",
                    等级 = 15,
                    当前生命值 = 850,
                    当前魔法值 = 420,
                    基础属性 = new 属性配置
                    {
                        生命值 = 850,
                        魔法值 = 420,
                        物理攻击 = 45,
                        物理防御 = 35,
                        火属性攻击 = 85,
                        水属性攻击 = 0,
                        风属性攻击 = 0,
                        土属性攻击 = 0,
                        火属性抗性 = 40,
                        水属性抗性 = 25,
                        风属性抗性 = 25,
                        土属性抗性 = 25,
                        速度 = 65,
                        幸运值 = 30
                    },
                    当前属性 = new 属性配置
                    {
                        生命值 = 850,
                        魔法值 = 420,
                        物理攻击 = 45,
                        物理防御 = 35,
                        火属性攻击 = 85,
                        水属性攻击 = 0,
                        风属性攻击 = 0,
                        土属性攻击 = 0,
                        火属性抗性 = 40,
                        水属性抗性 = 25,
                        风属性抗性 = 25,
                        土属性抗性 = 25,
                        速度 = 65,
                        幸运值 = 30
                    }
                }
            };

            // 重新初始化怪物数据
            怪物队伍 = new List<怪物>
            {
                new 怪物
                {
                    Id = Guid.NewGuid(),
                    名称 = "熔岩巨人",
                    头像 = "🌋",
                    等级 = 20,
                    当前生命值 = 1500,
                    当前魔法值 = 200,
                    基础属性 = new 属性配置
                    {
                        生命值 = 1500,
                        魔法值 = 200,
                        物理攻击 = 85,
                        物理防御 = 60,
                        火属性攻击 = 70,
                        水属性攻击 = 0,
                        风属性攻击 = 0,
                        土属性攻击 = 30,
                        火属性抗性 = 80,
                        水属性抗性 = 10,
                        风属性抗性 = 20,
                        土属性抗性 = 40,
                        速度 = 35,
                        幸运值 = 15
                    },
                    当前属性 = new 属性配置
                    {
                        生命值 = 1500,
                        魔法值 = 200,
                        物理攻击 = 85,
                        物理防御 = 60,
                        火属性攻击 = 70,
                        水属性攻击 = 0,
                        风属性攻击 = 0,
                        土属性攻击 = 30,
                        火属性抗性 = 80,
                        水属性抗性 = 10,
                        风属性抗性 = 20,
                        土属性抗性 = 40,
                        速度 = 35,
                        幸运值 = 15
                    }
                }
            };

            // 重新初始化技能数据
            foreach (var 玩家 in 玩家队伍)
            {
                玩家.重新计算属性();
                可用技能列表.Clear();
                可用技能列表.AddRange(玩家.当前技能槽);
            }

            // 重新初始化物品数据
            foreach (var 玩家 in 玩家队伍)
            {
                可用物品列表.Clear();
                可用物品列表.AddRange(玩家.仓库物品);
            }

            // 清空战斗日志
            战斗日志列表.Clear();
            战斗日志列表.Add("<span class='battle-start'>[战斗开始] 真实战斗已启动！</span>");
            战斗日志列表.Add("<span class='system-message'>敌人出现了！准备战斗！</span>");

            StateHasChanged();
        }
        catch (Exception ex)
        {
            Console.WriteLine($"初始化真实战斗数据失败: {ex.Message}");
            添加战斗日志("<span class='warning'>初始化真实战斗数据失败，请检查控制台获取详细信息。</span>");
        }
    }

    private async Task 加载副本数据(string 副本Id)
    {
        try
        {
            if (Guid.TryParse(副本Id, out var id))
            {
                var 所有副本 = await 配置加载器.获取所有副本();
                var 副本 = 所有副本.FirstOrDefault(d => d.Id == id);
                if (副本 != null)
                {
                    当前地点 = $"副本: {副本.名称}";
                }
                else
                {
                    当前地点 = $"副本: 未知副本 ({副本Id})";
                }
            }
            else
            {
                当前地点 = $"副本: 无效ID ({副本Id})";
            }
        }
        catch (Exception ex)
        {
            当前地点 = $"副本: 加载失败 ({副本Id})";
            Console.WriteLine($"加载副本数据失败: {ex.Message}");
        }
    }
    #endregion

    #region 战斗功能
    private void 选择目标(战斗单位 目标)
    {
        选中目标 = 目标;
    }

    private async Task 使用技能(游戏元素 使用的技能)
    {
        if (当前行动玩家 == null)
        {
            添加战斗日志("<span class='warning'>当前不是你的回合！</span>");
            await 滚动到底部();
            return;
        }

        // 检查魔法值是否足够
        if (当前行动玩家.当前魔法值 < 使用的技能.消耗魔法值)
        {
            添加战斗日志("<span class='warning'>魔法值不足！</span>");
            await 滚动到底部();
            return;
        }

        // 如果是自动战斗模式，自动选择目标
        if (自动战斗)
        {
            var 随机 = new Random();
            战斗单位? 目标 = null;
            
            if (使用的技能.目标类型 == 技能目标类型.敌方单体 || 使用的技能.目标类型 == 技能目标类型.敌方群体)
            {
                var 活着的敌人 = 怪物列表.Where(m => m.是否存活).ToList();
                if (活着的敌人.Any())
                    目标 = 活着的敌人[随机.Next(活着的敌人.Count)];
            }
            else if (使用的技能.目标类型 == 技能目标类型.友方单体 || 使用的技能.目标类型 == 技能目标类型.友方群体)
            {
                var 活着的队友 = 玩家列表.Where(p => p.是否存活).ToList();
                if (活着的队友.Any())
                    目标 = 活着的队友[随机.Next(活着的队友.Count)];
            }
            else if (使用的技能.目标类型 == 技能目标类型.自身)
            {
                目标 = 当前行动玩家;
            }
            
            await 执行技能(使用的技能, 目标);
            return;
        }

        // 检查是否需要选择目标
        if (使用的技能.目标类型 != 技能目标类型.自身)
        {
            if (选中目标 == null)
            {
                添加战斗日志("<span class='warning'>请先选择一个目标！</span>");
                await 滚动到底部();
                return;
            }

            // 验证目标是否符合技能要求
            if (!验证目标有效性(使用的技能.目标类型, 选中目标, 当前行动玩家))
            {
                添加战斗日志("<span class='warning'>选择的目标不符合技能要求！</span>");
                await 滚动到底部();
                return;
            }
        }

        await 执行技能(使用的技能, 选中目标);
        选中目标 = null;
    }

    private async Task 执行技能(游戏元素 使用的技能, 战斗单位? 目标)
    {
        try
        {
            if (当前行动玩家 == null) return;

            // 构建目标列表
            var 目标列表 = new List<战斗单位>();
            if (目标 != null)
            {
                目标列表.Add(目标);
            }
            else if (使用的技能.目标类型 == 技能目标类型.自身)
            {
                目标列表.Add(当前行动玩家);
            }

            // 通过Hub提交决策
            if (_isConnected && _hubConnection != null)
            {
                var 目标ID列表 = 目标列表.Select(t => t.Id).ToList();
                await _hubConnection.InvokeAsync("提交战斗决策", 
                    当前战斗Id, 当前行动玩家.Id, 使用的技能.名称, 目标ID列表);
            }
            else
            {
                // 本地模拟 - 直接调用游戏主服务
                var 结果 = await 游戏主服务.玩家使用技能(当前行动玩家, 使用的技能, 目标列表);
                if (结果.是否成功)
                {
                    添加战斗日志($"<span class='player-action'>[{当前行动玩家.名称}]</span> 使用了 <span class='skill-name'>[{使用的技能.名称}]</span>！");
                }
                else
                {
                    添加战斗日志($"<span class='warning'>技能使用失败: {结果.消息}</span>");
                }
            }

            StateHasChanged();
            await 滚动到底部();
        }
        catch (Exception ex)
        {
            添加战斗日志($"<span class='warning'>技能执行错误: {ex.Message}</span>");
            await 滚动到底部();
        }
    }

    private bool 验证目标有效性(技能目标类型 目标类型, 战斗单位 目标, 战斗单位 玩家)
    {
        switch (目标类型)
        {
            case 技能目标类型.自身:
                return 目标.Id == 玩家.Id;
            case 技能目标类型.友方单体:
                return 目标.单位类型 == 玩家.单位类型 && 目标.是否存活;
            case 技能目标类型.敌方单体:
                return 目标.单位类型 != 玩家.单位类型 && 目标.是否存活;
            case 技能目标类型.友方群体:
                return 目标.单位类型 == 玩家.单位类型 && 目标.是否存活;
            case 技能目标类型.敌方群体:
                return 目标.单位类型 != 玩家.单位类型 && 目标.是否存活;
            default:
                return false;
        }
    }

    private async Task 使用物品(游戏元素 使用的物品)
    {
        if (选中目标 == null)
        {
            添加战斗日志("<span class='warning'>请先选择一个目标！</span>");
            await 滚动到底部();
            return;
        }

        try
        {
            string 目标名称 = 选中目标.名称;
            string 日志条目 = $"<span class='player-action'>[{当前行动玩家?.名称 ?? "玩家"}]</span> 对 <span class='player-name'>[{目标名称}]</span> 使用了 <span class='item-name'>[{使用的物品.名称}]</span>！";
            添加战斗日志(日志条目);

            // 减少物品数量
            使用的物品.数量--;
            if (使用的物品.数量 <= 0)
            {
                物品列表.Remove(使用的物品);
            }

            await 滚动到底部();
            StateHasChanged();
        }
        catch (Exception ex)
        {
            添加战斗日志($"<span class='warning'>物品使用失败: {ex.Message}</span>");
            await 滚动到底部();
        }
    }

    private async Task 逃离战斗()
    {
        添加战斗日志("<span class='flee-action'>[玩家] 试图逃离战斗...</span>");
        await 滚动到底部();

        await Task.Delay(1500);

        await JS.InvokeVoidAsync("eval", @"
            var adventurePage = document.getElementById('adventure-page');
            if (adventurePage) adventurePage.style.display = 'none';

            var worldPage = document.getElementById('world-page');
            if (worldPage) worldPage.style.display = 'flex';
        ");
    }

    private async Task 切换自动战斗()
    {
        自动战斗 = !自动战斗;
        
        if (_isConnected && _hubConnection != null && 当前行动玩家 != null)
        {
            try
            {
                await _hubConnection.InvokeAsync("设置自动战斗", 
                    当前战斗Id, 当前行动玩家.Id, 自动战斗);
            }
            catch (Exception ex)
            {
                Console.WriteLine($"设置自动战斗失败: {ex.Message}");
            }
        }

        添加战斗日志($"<span class='system-message'>自动战斗已{(自动战斗 ? "开启" : "关闭")}</span>");
        
        StateHasChanged();
    }
    #endregion

    #region 模态框功能
    private void 打开技能选择()
    {
        显示技能选择 = true;
        StateHasChanged();
    }

    private void 关闭技能选择()
    {
        显示技能选择 = false;
        StateHasChanged();
    }

    private void 选择技能(游戏元素 技能)
    {
        if (技能列表.Count < 5)
        {
            技能列表.Add(技能);
        }
        else
        {
            技能列表[4] = 技能;
        }
        
        关闭技能选择();
        StateHasChanged();
    }

    private void 打开背包()
    {
        显示背包 = true;
        StateHasChanged();
    }

    private void 关闭背包()
    {
        显示背包 = false;
        StateHasChanged();
    }

    private async Task 使用背包物品(游戏元素 物品)
    {
        添加战斗日志($"<span class='player-action'>[玩家]</span> 使用了 <span class='item-name'>[{物品.名称}]</span>");
        
        物品.数量--;
        if (物品.数量 <= 0)
        {
            背包物品列表.Remove(物品);
        }
        
        if (物品.类型 == 物品类型.道具 && 物品列表.Count < 3)
        {
            物品列表.Add(物品);
        }
        
        await 滚动到底部();
        StateHasChanged();
    }

    private string 获取物品图标(游戏元素 物品)
    {
        return 物品.名称 switch
        {
            "治疗药水" => "❤️",
            "魔法药水" => "🔮",
            "复活卷轴" => "📜",
            "力量药剂" => "💪",
            "敏捷药剂" => "⚡",
            _ => "📦"
        };
    }

    private string 获取物品描述(游戏元素 物品)
    {
        return 物品.名称 switch
        {
            "治疗药水" => "恢复生命值",
            "魔法药水" => "恢复魔法值",
            "复活卷轴" => "复活阵亡队友",
            "力量药剂" => "暂时提升力量",
            "敏捷药剂" => "暂时提升敏捷",
            _ => "未知物品"
        };
    }
    #endregion

    #region 辅助方法
    private async Task 滚动到底部()
    {
        await Task.Delay(10);
        await JS.InvokeVoidAsync("eval", @"
            var battleLog = document.getElementById('battle-log');
            if (battleLog) {
                battleLog.scrollTop = battleLog.scrollHeight;
            }
        ");
    }

    // 公共方法
    public void 显示页面(string 地点名称)
    {
        是否显示 = true;
        当前地点 = 地点名称;
        选中目标 = null;
        StateHasChanged();
    }

    public void 隐藏页面()
    {
        是否显示 = false;
        StateHasChanged();
    }

    public void 更新玩家数据(List<玩家> 新的玩家数据)
    {
        玩家队伍 = 新的玩家数据;
        StateHasChanged();
    }

    public void 更新怪物数据(List<怪物> 新的怪物数据)
    {
        怪物队伍 = 新的怪物数据;
        StateHasChanged();
    }

    public void 更新技能数据(List<游戏元素> 新的技能数据)
    {
        可用技能列表 = 新的技能数据;
        StateHasChanged();
    }

    public void 更新物品数据(List<游戏元素> 新的物品数据)
    {
        可用物品列表 = 新的物品数据;
        StateHasChanged();
    }
    
    public void 设置当前玩家回合(玩家 玩家)
    {
        当前行动玩家 = 玩家;
        StateHasChanged();
    }
    
    public void 重置回合状态()
    {
        当前行动玩家 = null;
        选中目标 = null;
        StateHasChanged();
    }
    
    [JSInvokable]
    public void 初始化冒险页面(string 地点名称)
    {
        是否显示 = true;
        当前地点 = 地点名称;
        选中目标 = null;
        StateHasChanged();
    }
    #endregion
}